//1引入Vue
import Vue from "vue";

//2.引入VueRouter
import VueRouter from "vue-router";

//路由懒加载
const Lodin = () => import("../pages/Lodin")
const Home = () => import("../pages/Home")
const Game = () => import("../pages/Home/game")
const Movie = () => import("../pages/Home/movie")
const Music = () => import("../pages/Home/music")
const Song = () => import("../pages/Home/music/song")
const Todo = () => import("../pages/todoList")
const Study = () => import("../pages/Home/study")

/* import Lodin from "../pages/Lodin"
import Home from "../pages/Home"
import Game from "../pages/Home/game"
import Movie from "../pages/Home/movie"
import Music from "../pages/Home/music"
import Song from "../pages/Home/music/song"
import Todo from "../pages/todoList"
import Study from "../pages/Home/study"
 */

//3.使用VueRouter插件
Vue.use(VueRouter)

//创建路由器对象并暴露
export default new VueRouter({
    //开启history模式
    mode: 'history',

    //路由表
    routes:[
        //主页
        {
            path: "/home" , 
            component: Home , 
            name: "home",
            //二级路由
            children:[
                //游戏
                {path: "game" , component: Game , name: "game" },
                //电影params传参要在路由表中配合 props给组件传参
                {path: "movie/:id/:time?" , component: Movie , name: "movie" , props: true},
                //音乐  props给组件传参
                {
                    path: "music" , 
                    component: Music , 
                    name: "music" , 
                    props: router => router.query,
                    //三级路由
                    children:[
                        {path: "song/:id"  , component: Song , name: "song" , props: true},
                    ]
                },
                //学科
                {   
                    path: "study" , 
                    component: Study , 
                    name: "study"  , 
                    //当前路由元信息
                    meta:{ name: "你是个**" , id: "沈阳好果汁有限公司"},
                    props: (route) => { return { ...route.query , ...route.params , ...route.meta } }
                },
            ]
        },
        //todolist
        {path: "/todo" , component: Todo , name: "todo"},
        //登录a
        {path: "/login" , component: Lodin , name: "login"},
        //重定向
        {path: "/" , redirect: "/login" },
    ]
})